<template>
  <div class="total">
    <div class="head">
      <router-link to="/sort">
        <van-icon name="arrow-left" size="25" />
      </router-link>
      <span>商品列表</span>

      <van-collapse v-model="activeNames" class="mark">
        <van-collapse-item name="1" icon="more-o" size="30">
          <a>首页</a>
          <a>分类</a>
          <a>购物车</a>
          <a>我的e宠</a>
        </van-collapse-item>
      </van-collapse>
    </div>

    <div class="search">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </div>

    <div class="sort">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item title="销量" />
        <van-dropdown-item v-model="value3" :options="option3" />

        <van-dropdown-item title="筛选" ref="item">
          <van-cell center title="按字母">
            <template #right-icon>
              <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <van-cell center title="按热度">
            <template #right-icon>
              <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <div style="padding: 5px 16px">
            <van-button type="danger" block round @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>

    <div
      class="tradename"
      v-for="(item, index) in good_likes"
      :key="index"
      to="/detail"
    >
      <div class="good_sh">
        <img :src="item.photo" alt="" />
      </div>
      <div class="good_she">
        <div>
          <h2>{{ item.presubject }}</h2>
        </div>
        <div>
          <span class="yans"> {{ item.sale_price }}</span>
          <span class="yana">{{ item.dprice }}</span>
        </div>
        <div class="yana">
          <span>{{ item.comments }}</span>
          <span>{{ item.sold }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//引入LIst中的Vant文件
import Vue from "vue";
import { Icon } from "vant";
import { Search } from "vant";
import { Toast } from "vant";
import { Divider } from "vant";
import { DropdownMenu, DropdownItem } from "vant";
import { Collapse, CollapseItem } from "vant";
import { Card } from "vant";
import { getAbc } from "../api/brand.js";

Vue.use(Card);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Divider);
Vue.use(Search);
Vue.use(Icon);

//方法
export default {
  data() {
    return {
      //小标题
      activeNames: ["0"],
      value: "",

      //下拉菜单
      value1: 0,
      value3: "a",
      value4: "A",
      option1: [
        { text: "默认排序", value: 0 },
        { text: "按人气", value: 1 },
        { text: "最新上架", value: 2 },
        { text: "按评论", value: 3 },
      ],
      option3: [
        { text: "从高到低", value: "a" },
        { text: "从低到高", value: "b" },
      ],
      //筛选菜单
      switch1: false,
      switch2: false,

      //商品
      good_likes: [],
    };
  },

  //商品
  created() {
    getAbc().then((res) => {
      console.log(res.data.list);
      this.good_likes = res.data.list;
    });
  },
  //搜索
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("取消");
    },
    //筛选菜单判断
    onConfirm() {
      this.$refs.item.toggle();
    },

    //商品
  },
};
</script>

<style src="../assets/css/list.css">
</style>